<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk"> 
<title></title>
<style>
body {margin:0;padding:0;-webkit-user-select:none;font:12px/1.5 Arial, Helvetica, sans-serif;background:#F5F6F7;}
header,section {padding:10px 15px;margin:0 auto;width:770px;border:solid 1px #a9c2e0;border-radius:5px;-webkit-box-shadow: 2px 3px 2px #DDD;background:#fff;}
header {margin:20px auto 15px;background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #fff), color-stop(0.7, #e7f1fb));}
header div {font:menu;font-size:30px;line-height:56px;text-shadow:#FBF8FC 1px 1px 1px;}
header img {float:right;}
section {width:720px;}
.main {height:300px;padding:40px;border-bottom:none;border-radius:5px 5px 0 0;}
.left {float:left;border-right:1px solid #a9c2e0;}
.left div {width:340px;padding:5px 20px;margin:5px auto 0;}
.left .single {margin:0;}
.left span,.left label {width:120px;margin-right:8px;display:inline-block;text-align:right;}
.right {float:right;padding:20px 0 0 10px;width:260px;display:none}
.right p,.right input.in {margin:0;width:202px;}
.right input[type=button] {height:26px;margin:0 5px 0 -1px;}
.right .error{margin:1px 0;color:red;height:20px;}
.right .wel{font-size:18px;}
.right b{font-size:20px;overflow:hidden;text-overflow:ellipsis;}
.save {height:20px;padding:20px 40px;border-radius:0 0 5px 5px;}
.save .btns {float:right;}
#version {float:left;padding:1px 8px;background:#a9c2e0;border-radius:8px;}
#saveBtn, #closeBtn{width:100px;height:30px;margin:-5px 10px;}
#saveMessage {background:yellow;font-size:14px;padding:4px 8px;opacity:0;border-radius:5px;-webkit-transition: all .6s linear;}
</style>
</head>
<body>
<header>
	<div i18n="optionsTitle"></div>
</header>
<section class="main">
	<div class="left">
		<div>
			<p><label i18n="hotkeyEnableText" for="hotkeyEnable"></label><input id="hotkeyEnable" type="checkbox" /></p>
			<p><span i18n="imageHotkeyText"></span><input id="imageHotkeyValue" type="text"/></p>
			<p><span i18n="textHotkeyText"></span><input id="textHotkeyValue" type="text"/></p>
		</div>
		<div>
			<p class="single"><label i18n="enableAnalysisHelper" for="enableAnalysisHelper"></label><input id="enableAnalysisHelper" type="checkbox" /></p>
		</div>
		<div>
	        <p class="single"><label i18n="enableSuperAutoNextPage" for="enableSuperAutoNextPage"></label><input id="enableSuperAutoNextPage" type="checkbox" /></p>
	    </div>
	</div>
	<div id="userInfoPanel" class="right">
		<p id="notify" i18n="optionsLoginNotify"></p>
		<p>&nbsp;</p>
		<div id="loginPanel">
			<p i18n="emailLabel">Email:</p>
			<p><input id="email" class="in"/></p>
			<p id="emailErr" class="error"></p>
			<p i18n="passwordLabel">Password:</p>
			<p><input id="password" class="in" type="password"/></p>
			<p id="passErr" class="error"></p>
			<p><button id="login" type="button" i18n="login"></button> <button id="reg" type="button" i18n="register"></button></p>
		</div>
	</div>
</section>
<section class="save">
	<div id="version"></div>
	<div class="btns">
        <span id="saveMessage"></span>
		<button id="saveBtn" i18n="optionsSaveBtn"></button>
        <button id="closeBtn" i18n="optionsCloseBtn" onclick="window.close();"></button>
	</div>
</section>
<script src="js/qui.js"></script>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open("GET", chrome.extension.getURL('manifest.json'));
request.onreadystatechange = function() {
    if (this.readyState == XMLHttpRequest.DONE) {
        $('#version').html('v '+JSON.parse(this.responseText).version);
    }
};
request.send();

var _m = chrome.i18n.getMessage,
    bg = chrome.extension.getBackgroundPage(),
	userInfo = bg.storage.get('user_info'),
	optionsHotkey = bg.storage.get('options_hotkey'),
	enableAnalysisHelper = bg.storage.get('options_enableAnalysisHelper'),
	enableSuperAutoNextPage = bg.storage.get('options_enableSuperAutoNextPage'),
	skinSetting = bg.storage.get('setting_textSkin');
	hotkeyInputs = document.querySelectorAll('input[type="text"]'),
	i18nEles = document.querySelectorAll('*[i18n]');

for(var i=0;i<i18nEles.length;i++){
    var item = i18nEles[i];
	item.innerHTML = _m(item.getAttribute('i18n'));	
}

if (!optionsHotkey){
    optionsHotkey = {
        enable:false,
        image:'Ctrl+Alt+I',
        text:'Ctrl+Alt+T',
        link:'Ctrl+Alt+L'
    }
}

function setHotkeyEnable(){
    for(var i=0;i<hotkeyInputs.length;i++){
        var item =hotkeyInputs[i] , key = item.id.replace('HotkeyValue', ''); 
        item.value = optionsHotkey[key];
        item.disabled = !optionsHotkey.enable;
    }
}
function showSaveResult(res){
	var text = res ? _m('optionsSaveSuccess') : _m('optionsSaveFail');
	$('#saveMessage').html(text).css({opacity:1});
	setTimeout(function(){
		$('#saveMessage').css({opacity:0})
	}, 2000);
}
$('#hotkeyEnable').attr({
	checked:optionsHotkey.enable, 
	onchange:function(){
		optionsHotkey.enable = this.checked;
		setHotkeyEnable();
	}
});
$('#saveBtn').attr({
	onclick:function(){
		for(var i=0;i<hotkeyInputs.length;i++){
	        var item =hotkeyInputs[i] , key = item.id.replace('HotkeyValue', ''); 
	        optionsHotkey[key] = item.value.trim();
	    }
		var res = bg.storage.set('options_hotkey', optionsHotkey);
		bg.syncStorage();
		showSaveResult(res);
	}
});
setHotkeyEnable();
(function(){
	if (enableAnalysisHelper === ''){
		enableAnalysisHelper = 1;
		bg.storage.set('options_enableAnalysisHelper', enableAnalysisHelper);
	}
	enableAnalysisHelper && $('#enableAnalysisHelper').attr({checked:true});
	$('#enableAnalysisHelper').attr({onchange:function(){
		bg.storage.set('options_enableAnalysisHelper', this.checked|0);
	}});
	
	if (enableSuperAutoNextPage === ''){
		enableSuperAutoNextPage = 1;
		bg.storage.set('options_enableSuperAutoNextPage', enableSuperAutoNextPage);
	}
	enableSuperAutoNextPage && $('#enableSuperAutoNextPage').attr({checked:true});
	$('#enableSuperAutoNextPage').attr({onchange:function(){
		bg.storage.set('options_enableSuperAutoNextPage', this.checked|0);
	}});
})();

(function(){
	function lie(e,b){b=b.length;for(var c=e.split(''),a=0,d;d=c[a];a++)c[a]=String.fromCharCode(d.charCodeAt()+a+b*(a%2?1:-1));return escape(c.join(''))}
	function isEmail(a){var b=a.split('@').shift(),fisrtChr=lastChr=/[a-zA-Z0-9]/,pattern=/^([a-zA-Z0-9-_.]){2,42}@([a-zA-Z0-9.]){2,}(\.(com|cn|net|org|edu|gov)){1}$/i;return(pattern.test(a)&&fisrtChr.test(b.substr(0,1))&&lastChr.test(b.substr(b.length-1,1)))?true:false}
	function showErr(msg){
        $('#notify').css({color:'red'}).html(msg);
	}
	function showWelcome(username){
        $('#notify').html('');
        $('#loginPanel').html('<p class="wel">'+_m('optionsWelcome')+'</p><b>'+username+'</b><p ></p><p class="error"><br/>Tips: '+_m('optionsSyncTips')+'<br/><br/><a href="'+bg.listUrl+'?id='+(parseInt(userInfo.uid)+100000)+'">'+_m('collectionUrl')+'</a></p>');
	}
	function submit(type){
        var type = (type == 'login') ? 'checkuser' : 'adduser',
            emailVal = $('#email').val().trim(),
            passVal = $('#password').val().trim(), 
            url= bg.baseUrl+"?type="+type+"&username="+lie(emailVal, passVal)+"&password="+lie(passVal, emailVal);

        if (!emailVal || !isEmail(emailVal)){
            showErr(_m('optionsLoginInvalidEmail'));
            return;
        }
		if (passVal.length < 6 || passVal.length > 20) {
			showErr(_m('optionsLoginInvalidPassword'));
			return;
		}
		
        bg.ajax(url, '', 'get', function(res){
            if (res.suc == '1'){
                delete res.suc;
				delete res.errmsg;
				userInfo = res;
                bg.storage.set('user_info', res);
                showWelcome(res.name);
            }else{
                showErr(res.errmsg || _m('optionsDefaultErrMsg'));
            }
        });
    }
	
	if (userInfo.uid && userInfo.token && userInfo.name){
		showWelcome(userInfo.name);
	}else{
	    $('#email').attr({
	        onchange:function(){
	            var val = this.value.trim();
	            if (!val || !isEmail(val)) {
	                showErr(_m('optionsLoginInvalidEmail'));
	                this.select();
	            }
	        }
	    });
	    $('#password').attr({
			onchange:function(){
		        var len = this.value.trim().length;
		        if (len < 6 || len > 20){
		            showErr(_m('optionsLoginInvalidPassword'));
		            this.select();
		        }
		    },
			onkeydown:function(e){
                e.keyCode==13 && submit('login');
		    }
		});
	    $('#login').attr({onclick:function(){
	        submit('login');
	    }});
	    $('#reg').attr({onclick:function(){
	        submit('reg');
	    }});
	}
	$('#userInfoPanel').show();
})();
</script>
</body>	
</html>